<template>
  <div class='container'>
    <el-card>
      <!-- 搜索栏 -->
      <el-form
        :inline="true"
        :model="subjectsInfo"
        class="demo-form-inline"
      >
        <el-form-item label="学科名称">
          <el-input v-model="subjectsInfo.subjectName" />
        </el-form-item>
        <el-form-item>
          <el-button @click="clearInfo">
            清除
          </el-button>
          <el-button
            type="primary"
            @click="searchInfo"
          >
            搜索
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 新增按钮 -->
      <el-button
        class="colright"
        size="mini"
        type="success"
        icon="el-icon-edit"
        @click="addSubjects"
      >
        新增学科
      </el-button>
        <!-- 新增学科弹窗 -->
        <el-dialog
          @close="closeAddSubjectsDialog"
          title="新增学科"
          :visible.sync="addSubjectsDialogVisible"
          width="30%"
        >
          <el-form
            ref="addSubjectsForm"
            :model="addSubjectsForm"
            label-width="80px"
          >
            <el-form-item label="学科名称">
              <el-input v-model="addSubjectsForm.subjectName" />
            </el-form-item>
          </el-form>
          <span class="subspan">是否显示</span>
          <el-switch
            v-model="addSubjectsForm.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
          <span slot="footer" class="dialog-footer">
            <el-button @click="closeAdd">
              取 消
            </el-button>
            <el-button
              type="primary"
              @click="addSubjectsSubmit"
            >
              确 定
            </el-button>
          </span>
        </el-dialog>
        <!-- 修改学科弹窗 -->
        <el-dialog
          title="修改学科"
          :visible.sync="editSubjectsDialogVisible"
          width="30%"
        >
          <el-form
            ref="editSubjectsForm"
            :model="editSubjectsForm"
            label-width="80px"
          >
            <el-form-item label="学科名称">
              <el-input v-model="editSubjectsForm.subjectName" />
            </el-form-item>
          </el-form>
          <span class="subspan">是否显示</span>
          <el-switch
            v-model="editSubjectsForm.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
          <span slot="footer" class="dialog-footer">
            <el-button @click="editSubjectsDialogVisible = false">
              取 消
            </el-button>
            <el-button
              type="primary"
              @click="editSubjectsSubmit"
            >
              确 定
            </el-button>
          </span>
        </el-dialog>
      <el-alert
        class="num"
        :title="`数据一共 ${subjectsList.counts} 条`"
        :closable="false"
        type="info"
        show-icon
      />
      <my-table
        :table-props="{
          data:subjectsList.items,
        }"
        :columns="[
          {label: '序号', prop: 'index', align: 'center', width: '50'},
          {label: '学科名称', prop: 'subjectName', align: 'center', width: '120'},
          {label: '创建者', prop: 'username', align: 'center', width: '120'},
          {label: '创建日期', prop: 'addDate', align: 'center'},
          {label: '前台是否显示', prop: 'isFrontDisplay', align: 'center', width: '120'},
          {label: '二级目录', prop: 'twoLevelDirectory', align: 'center', width: '120'},
          {label: '标签', prop: 'tags', align: 'center', width: '120'},
          {label: '题目数量', prop: 'totals', align: 'center', width: '120'},
          {label: '操作', slotName: 'operators', align: 'center', fixed: 'right', width: '220'},
        ]"
        :pagination-props="{
          background: true,
          layout: 'prev, pager, next, sizes, jumper',
          total: subjectsList.counts,
          pageSizes: [5, 10, 15, 20]
        }"
        :pagination-events="events"
      >
        <template #status>
          <el-switch :value="true" />
        </template>
        <template v-slot:operators="scope">
          <el-button
            type="text"
            size="small"
            @click="subjectsClassify(scope.row)"

          >
            学科分类
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="subjectsTags(scope.row)"
          >
            学科标签
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="subjectsRecompose(scope.row)"
          >
            修改
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="subjectsDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </my-table>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import * as subjectApi from '@/api/hmmm/subjects'
let needId = null;
export default {
  name: 'subjects',
  data () {
    return {
      editSubjectsDialogVisible: false,
      addSubjectsDialogVisible: false,
      // 当前页码
      currentPage: 1,
      // 每页显示条数
      pagesize: 10,
      events: {
        'current-change': this.handleCurrentChange,
        'size-change': this.handleSizeChange
      },
      subjectsInfo: {},
      addSubjectsForm: {
        subjectName: '',
        isFrontDisplay: true
      },
      editSubjectsForm: {
        subjectName: '',
        isFrontDisplay: true
      }
    }
  },
  methods: {
    ...mapActions('subjects', [
      'getSubjectsList'
    ]),
    // 当前页改变时
    handleCurrentChange (val) {
      this.currentPage = val
      this.getSubjectsList({
        page: this.currentPage,
        pagesize: this.pagesize
      })
    },
    // 每页显示条数改变时
    handleSizeChange (val) {
      this.pagesize = val
      this.currentPage = 1
      this.getSubjectsList({
        page: this.currentPage,
        pagesize: this.pagesize
      })
    },
    // 清除
    clearInfo () {
      this.subjectsInfo = {}
      // 刷新页面
      this.getSubjectsList({
        page: 1,
        pagesize: this.pagesize
      })
    },
    // 搜索
    searchInfo () {
      this.getSubjectsList({
        page: 1,
        pagesize: this.pagesize,
        ...this.subjectsInfo
      })
    },
    //
    // 新增学科
    addSubjects() {
      this.addSubjectsDialogVisible = true;
    },
    // 关闭新增学科窗口
    closeAddSubjectsDialog() {
      // 清空表单
      this.addSubjectsForm = {
        subjectName: '',
        isFrontDisplay: true
      }
    },
    // 取消提交
    closeAdd() {
      this.addSubjectsDialogVisible = false
    },
    // 新增学科提交
    addSubjectsSubmit() {
      subjectApi.addSubject({
        subjectName: this.addSubjectsForm.subjectName,
        isFrontDisplay: this.addSubjectsForm.isFrontDisplay
      })
      // 关闭弹窗
      this.addSubjectsDialogVisible = false
      // 200毫秒后刷新列表
      setTimeout(() => {
        this.getSubjectsList({
          page: 1,
          pagesize: this.pagesize
        })
      }, 200)

    },
    // 学科分类按钮
    subjectsClassify(scope) {
      this.$router.push({
        name: 'subjects-directorys',
        params: {
          id: scope.id,
          name: scope.subjectName
        }
      })
    },
    // 学科标签按钮
    subjectsTags(scope) {
      this.$router.push({
        name: 'subjects-tags',
        params: {
          id: scope.id,
          name: scope.subjectName
        }
      })
      console.log(scope);
    },
    // 删除
    subjectsDelete(row) {
      console.log(row.id);
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row.id);
        subjectApi.deleteSubject({
          id: row.id
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        //200毫秒后刷新列表
        setTimeout(() => {
          this.getSubjectsList({
            page: this.currentPage,
            pagesize: this.pagesize,
          })
        }, 200)

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 修改
    subjectsRecompose(row) {
      // console.log(row);
      // console.log(row.id);
      this.editSubjectsDialogVisible = true
      needId = row.id
      // 返显
      this.editSubjectsForm.subjectName = row.subjectName
      this.editSubjectsForm.isFrontDisplay = row.isFrontDisplay === '是' ? true : false
    },
    // 修改学科提交
    editSubjectsSubmit() {
      // console.log(needId);
      subjectApi.updateSubject({
        id: needId,
        subjectName: this.editSubjectsForm.subjectName,
        isFrontDisplay: this.editSubjectsForm.isFrontDisplay
      })
      // 关闭弹窗
      this.editSubjectsDialogVisible = false
      // 200毫秒之后刷新列表
      setTimeout(() => {
        this.getSubjectsList({
          page: this.currentPage,
          pagesize: this.pagesize,
        })
      }, 200)
    }
  },
  computed: {
    ...mapState('subjects', [
      'subjectsList'
    ])
  },
  created () {
    this.getSubjectsList({
      page: this.currentPage,
      pagesize: this.pagesize,
    })
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 20px;

  .colright {
    float: right;
    margin-bottom: 20px;
  }

  .num {
    margin-bottom: 20px;
  }

  .dialog-footer {
    text-align: center;
  }

  .subspan {
    font-size: 14px;
    font-weight: 700;
    margin-right: 10px;
    margin-left: 10px;
  }
}
</style>
